import React, { Component } from 'react'
import { SearchBar, Carousel, Flex } from 'antd-mobile';
import { NavBar } from 'antd-mobile';

import { withRouter } from "react-router-dom";

import "./index.scss"
import myaxios from "../../utils/myaxios"

// const cors = require('koa2-cors');
// Index.use(cors());

class Index extends Component {


    state = {
        swiper_list: [],
        imgHeight: 176,
        catitems: [],
        productData: []
    }

    // 点击事件开始

    // 轮播图点击
    handleSwiperClick = (goods_id) => {
        this.props.history.push("/goodDetail/" + goods_id);
    }
    // 分类导航点击

    handleCatItemClick = (params) => {
        this.props.history.push("/category")

    }
    // 图片列表的点击事件
    handleImgClick = () => {
        this.props.history.push("/goodList/query='123'");
    }
    // 点击事件结束


    componentDidMount() {
        //   轮播数据

        myaxios.get("home/swiperdata").then((res) => {

            this.setState({
                swiper_list: res
            })
        })

        //导航首页数据
        myaxios.get("home/catitems").then(res => {

            this.setState({
                catitems: res
            })
        })

        //首页图片列表
        myaxios.get("home/floordata").then(res => {
          
            this.setState({
               productData:res
            })
        })

    }
    render() {
        return (
            <div className="yg-index">
                {/* 导航条 */}
                <div className="yg-index-nav">
                    <NavBar className="index-nav">优购商城</NavBar>
                </div>
                {/* 导航条结束 */}

                {/* 搜索栏开始 */}
                <div className="yg-index-search">
                    <SearchBar placeholder="Search" maxLength={8} />
                </div>
                {/* 搜索栏结束 */}


                {/* 轮播图开始 */}
                <div className="yg-index-swiper">

                    <Carousel
                        autoplay={true}
                        infinite
                    >
                        {this.state.swiper_list.map(val => (
                            <div onClick={this.handleSwiperClick.bind(this, val.goods_id)}
                                key={val.goods_id}
                                style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
                            >
                                <img
                                    src={val.image_src}
                                    alt=""
                                    style={{ width: '100%', verticalAlign: 'top' }}
                                    onLoad={() => {
                                        // fire window resize event to change height
                                        window.dispatchEvent(new Event('resize'));
                                        this.setState({ imgHeight: 'auto' });
                                    }}
                                />
                            </div>
                        ))}
                    </Carousel>

                </div>
                {/* 轮播图结束 */}

                {/* 分类导航开始 */}
                <div className="yg-index-catitems">
                    <div className="catitems-item" >
                        <Flex >
                            {
                                this.state.catitems.map(v => {
                                    return <Flex.Item key={v.image_src} onClick={this.handleCatItemClick}>
                                        <img src={v.image_src} alt="" />
                                    </Flex.Item>
                                })
                            }
                        </Flex>
                    </div>
                </div>
                {/* 分类导航结束 */}
                {/* 首页图片列表开始 */}
                <div className="yg-index-productData">
                    {this.state.productData.map(v => {

                        return <div key={v.floor_title.image_src} className="productData-item">
                            {/* //  标题开始 */}
                            <div className="product-title">
                                <img src={v.floor_title.image_src} alt="" />

                            </div>
                            {/* //   标题结束 */}

                            {/* 图片列表开始 */}
                            <div className="product-image-list">
                                {
                                    v.product_list.map(vv => {
                                        return <div className="image-list-item" key={vv.image_src} onClick={this.handleImgClick}>
                                            <img src={vv.image_src} alt="" />
                                        </div>
                                    })
                                }
                            </div>
                            {/* 图片列表 结束 */}
                        </div>

                    })}
                </div>
                {/* 首页图片列表结束 */}
            </div>
        )
    }
}
export default withRouter(Index);

